<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>YuSloane的游戏帝国</title>
    <link rel="stylesheet" href="styles.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;700&display=swap" rel="stylesheet">
    <link rel="icon" href="images/favicon.png">
    <link rel="apple-touch-icon" href="images/favicon.png">
    <meta name="description" content="YuSloane的游戏帝国 - 30款精选小游戏，包括扫雷、2048、俄罗斯方块等多种类型游戏">
    <meta name="keywords" content="游戏, 小游戏, 在线游戏, 扫雷, 2048, 俄罗斯方块, 五子棋, 中国象棋">
    <meta name="author" content="YuSloane">
</head>
<body>
    <!-- 页面加载动画 -->
    <div class="loader" id="page-loader">
        <div class="loader-container">
            <div class="loader-icon">
                <i class="fas fa-gamepad"></i>
            </div>
            <div class="loader-text">YuSloane 游戏帝国加载中...</div>
            <div class="loader-spinner"></div>
        </div>
    </div>
    
    <div class="container">
        <header>
            <div class="logo-container">
                <div class="logo">
                    <i class="fas fa-gamepad"></i>
                </div>
                <h1>YuSloane的游戏帝国</h1>
            </div>
            <p class="subtitle">探索各种精彩游戏，尽情享受游戏乐趣！</p>
            <div class="search-container">
                <input type="text" id="search-input" placeholder="搜索游戏...">
                <button id="search-btn"><i class="fas fa-search"></i></button>
            </div>
            <div class="filter-container">
                <button class="filter-btn active" data-category="all">全部</button>
                <button class="filter-btn" data-category="puzzle">益智解谜</button>
                <button class="filter-btn" data-category="action">动作冒险</button>
                <button class="filter-btn" data-category="board">棋牌类</button>
                <button class="filter-btn" data-category="arcade">街机</button>
                <button class="filter-btn" data-category="music">音乐</button>
                <button class="filter-btn" data-category="3d">3D游戏</button>
            </div>
        </header>
        
        <main>
            <div class="games-container" id="games-grid">
                <!-- 游戏卡片将通过JavaScript动态生成 -->
            </div>
        </main>
        
        <footer>
            <div class="footer-content">
                <p>&copy; 2025 YuSloane的游戏帝国. 保留所有权利。</p>
                <div class="social-links">
                    <a href="https://github.com/xinxi2024" class="social-link"><i class="fab fa-github"></i></a>
                    <a href="#" class="social-link"><i class="fab fa-twitter"></i></a>
                    <a href="#" class="social-link"><i class="fab fa-linkedin"></i></a>
                </div>
            </div>
        </footer>
    </div>

    <!-- 游戏详情弹窗 -->
    <div class="modal" id="game-modal">
        <div class="modal-content">
            <span class="close-btn">&times;</span>
            <div class="modal-body">
                <h2 id="modal-title"></h2>
                <div class="game-preview" id="modal-preview"></div>
                <p id="modal-description"></p>
                <a id="modal-link" href="#" target="_blank" class="play-btn">立即开始游戏</a>
            </div>
        </div>
    </div>

    <script src="script.js"></script>
    <script>
        // 检查favicon是否正常加载，如果未加载则使用默认Base64图标
        window.addEventListener('load', function() {
            const faviconLink = document.querySelector('link[rel="icon"]');
            const img = new Image();
            img.onerror = function() {
                // 如果favicon加载失败，使用Base64默认图标
                const defaultFavicon = '';
                faviconLink.href = defaultFavicon;
            };
            img.src = faviconLink.href;
        });
    </script>
</body>
</html> 